<template>
    <div class="ChCompetition">
        <div style="    width: 100%;
    height: 3.5rem;"></div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" style="color:#fff;">幸运28</h1>
            <mt-button icon="more" slot="right" class=" mui-pull-right" style="    background: #d51313; color:#fff; box-shadow:none" @click=buttom>
            </mt-button>
            <div class="Chheader">
                <div class="Chhome">
                    <div class="ChhomeOne pa024">
                        <img src="../../img/Game/重庆时时彩图标.png" alt=""> 第 {{periods.now}} 期
                        <span>{{periods.day}}</span>
                        <span class="m_right5">截至投注</span>
                    </div>
                    <div class="ChhomeTwo pa024">{{timeheader}}</div>
                    <div class="ChhomeThere pa024"> 第 {{historyone.periods}} 期
                        <span class="number">
                            <span class="round">{{historyone.ball_1}}</span>
                            <span>+</span>
                            <span class="round">{{historyone.ball_2}}</span>
                            <span>+</span>
                            <span class="round">{{historyone.ball_3}}</span>
                            <span>=</span>
                            <span class="round background">{{historyone.result}}</span>
                        </span>
                        <span class="font " @click=xiangqi>
                            <span>详情</span><img src="../../img/Game/下拉.png" alt="">
                        </span>
                    </div>
                    <div class="Chhome4 pa024 Ch" style="display:none">
                        <div class="titlekaijiang">近期开奖</div>
                        <div class="ChhomeThere" v-for="item in history "> 第 {{item.periods}} 期
                            <span class="number">
                                <span class="round">{{item.ball_1}}</span>
                                <span>+</span>
                                <span class="round">{{item.ball_2}}</span>
                                <span>+</span>
                                <span class="round">{{item.ball_3}}</span>
                                <span>=</span>
                                <span class="round background">{{item.ball_3}}</span>
                            </span>
                            <span class="font font22">
                                {{item.ctime}}
                            </span>
                        </div>
                        <!--<div class="ChhomeThere"> 第 20180326095 期-->
                        <!--<span class="number">-->
                        <!--<span class="round">5</span>-->
                        <!--<span>+</span>-->
                        <!--<span class="round">8</span>-->
                        <!--<span>+</span>-->
                        <!--<span class="round">0</span>-->
                        <!--<span>=</span>-->
                        <!--<span class="round background">13</span>-->
                        <!--</span>-->
                        <!--<span class="font font22">-->
                        <!--10:30-->
                        <!--</span>-->
                        <!--</div>-->
                        <!--<div class="ChhomeThere"> 第 20180326095 期-->
                        <!--<span class="number">-->
                        <!--<span class="round">5</span>-->
                        <!--<span>+</span>-->
                        <!--<span class="round">8</span>-->
                        <!--<span>+</span>-->
                        <!--<span class="round">0</span>-->
                        <!--<span>=</span>-->
                        <!--<span class="round background">13</span>-->
                        <!--</span>-->
                        <!--<span class="font font22">-->
                        <!--10:30-->
                        <!--</span>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </header>

        <div class="round1">
            <div v-for="(item,i) in nu">
                <span class="round2 " @click="redRound(i,$event)" :class="{background:arry.indexOf(i)!=-1}">{{item.num}}
                </span>
                <span>{{item.odds}}</span>
            </div>

        </div>

        <div class="mint-msgbox-wrapper now1" style="position: absolute; z-index:20001;display:none;top: 0; left: 0;  bottom: 0;  right: 0;  width: 20%;  height: 10%; margin: auto;">
            <div class="mint-msgbox mint-msgboxone now2" style="display:none">
                <div class="mintOne">
                    <router-link to="/My/Touzhu/Xy28">
                        <div class="title">
                            <img src="../../img/Game/我的投注.png">
                            <span>我得投注</span>
                        </div>
                    </router-link>
                    <router-link to="/GameCenter/Mybey">
                        <div class="title">
                            <img src="../../img/Game/银币兑金币.png">
                            <span>银币兑金币</span>
                        </div>
                    </router-link>
                    <div class="title">
                        <img src="../../img/Game/玩法规则.png">
                        <span>玩法规则</span>
                    </div>
                    <router-link to="/My/xyun28">
                        <div class="title">
                            <img src="../../img/Game/历史.png">
                            <span>开奖历史</span>

                        </div>
                    </router-link>
                    <router-link to="/GameCenter/XyWinningList">
                        <div class="title">
                            <img src="../../img/Game/榜单.png">
                            <span>中奖榜单</span>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="tanchuang" style="display:none">
                <div class="tanchuang1">
                    下注清单
                    <img src="../../img/Game/下注清单关闭按钮.png" alt="" @click="modal">
                </div>
                <div class="tanchuang2Header">
                    <span class="li1">选项</span>
                    <span class="li1">投注码</span>
                    <span class="li1">赔率</span>
                    <span class="li1">金额</span>
                </div>
                <ul>
                    <li v-for="data in name" :key=data.id>
                        <span class="li2" v-if="data.category === 0">特码</span>
                        <span class="li2" v-else-if="data.category === 1">大小单双</span>
                        <span class="li2" v-else-if="data.category === 2">混合</span>
                        <span class="li2">{{data.content}}</span>
                        <span class="li2">{{data.odds}}</span>
                        <span class="li2">{{money}}</span>
                    </li>

                </ul>
                <div class="tanchuangFoot">
                    <span class="imgInput">
                        追
                        <span class="jia" @click="jiaqi"> <img src="../../img/Game/加.png" alt=""></span><input type="number" v-model="duqi">
                        <span class="jian" @click="jianqi"> <img src="../../img/Game/减.png" alt=""></span>
                        <span class="r_left"> 期</span>
                    </span>

                    <span class="heji"> 合计：
                        <span>{{length1*money*duqi==NaN?0:length1*money*duqi}}</span>
                    </span>
                </div>
                <div class="queding" @click="goBet">
                    确定
                </div>
            </div>
        </div>
        <div class="v-modal" style=z-index:2000;display:none @click="modal"></div>
        <nav class="mui-bar mui-bar-tab toww" style="display:block">

            <span class="few">共{{length1}}注</span>
            <span class="By"><input type="number" placeholder="请输入金币" v-model="money" pattern="[0-9]*"> </span>
            <span class="qingkong" @click="empty">清空</span>
            <span class="Betting" @click="Chdetails"> 投注</span>

        </nav>
    </div>
</template>

<script>
import { Navbar, TabItem } from "mint-ui";
import { Toast } from "mint-ui";

export default {
    data() {
        return {
            nu: [
                { num: "00", odds: "" },
                { num: "01", odds: "" },
                { num: "02", odds: "" },
                { num: "03", odds: "" },
                { num: "04", odds: "" },
                { num: "05", odds: "" },
                { num: "06", odds: "" },
                { num: "07", odds: "" },
                { num: "08", odds: "" },
                { num: "09", odds: "" },
                { num: "10", odds: "" },
                { num: "11", odds: "" },
                { num: "12", odds: "" },
                { num: "13", odds: "" },
                { num: "14", odds: "" },
                { num: "15", odds: "" },
                { num: "16", odds: "" },
                { num: "17", odds: "" },
                { num: "18", odds: "" },
                { num: "19", odds: "" },
                { num: "20", odds: "" },
                { num: "21", odds: "" },
                { num: "22", odds: "" },
                { num: "23", odds: "" },
                { num: "24", odds: "" },
                { num: "25", odds: "" },
                { num: "26", odds: "" },
                { num: "27", odds: "" },
                { num: "大", odds: "" },
                { num: "小", odds: "" },
                { num: "单", odds: "" },
                { num: "双", odds: "" },
                { num: "大双", odds: "" },
                { num: "大单", odds: "" },
                { num: "小单", odds: "" },
                { num: "小双", odds: "" }
            ],
            // nu:["00","01","02","03","04","05","06","07","08","09","10",11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,"大","小","单","双"],
            length1: 0,
            money: 10,
            arry: [],
            name: [],
            duqi: 1,
            periods: [],
            history: [],
            historyone: [],
            s: 0,
            j: 0,
            timer: null,
            timeheader: "00:00"
        };
    },
    created() {
        this.getPeriods();
        this.getHistory();
    },
    methods: {
        redRound: function(i, e) {
            if (i <= 27) {
                var tex = 0;
            } else if (i > 27 && i <= 31) {
                var tex = 1;
            } else if (i > 31) {
                var tex = 2;
            }

            if (this.arry.indexOf(i) == -1) {
                this.arry.push(i);

                var obj = {
                    category: tex,
                    content: e.target.innerText,
                    odds: e.target.parentNode.lastChild.innerText
                    // id: e.target.innerText,
                };
                this.name.push(obj);
            } else {
                this.arry.forEach((item, index) => {
                    if (item == i) {
                        this.arry.splice(index, 1);
                        this.name.splice(index, 1);
                    }
                });
            }
            this.length1 = this.arry.length;
        },
        buttom: function() {
            var modal = document.querySelector(".v-modal");
            var now2 = document.querySelector(".now2");
            var now1 = document.querySelector(".now1");
            modal.style.display = "block";
            now2.style.display = "block";
            now1.style.display = "block";
        },
        empty: function() {
            this.empt -= 1;
            var all = document.querySelectorAll(".redround");
            all.forEach(element => {
                element.style.opacity = "0";
            });
            this.length1 = 0; //
            this.arry = [];
            this.name = [];
        },
        modal: function() {
            var modal = document.querySelector(".v-modal");
            var now1 = document.querySelector(".now1");
            var now2 = document.querySelector(".now2");
            modal.style.display = "none";
            now1.style.display = "none";
            now2.style.display = "none";
            var tanchuang = document.querySelector(".tanchuang");
            tanchuang.style.display = "none";
        },
        time: function() {
            // new Date('2017-06-06 15:31:09').getTime();
            this.s =this.periods.time
            console.log(this.periods)
            this.j =60
            this.timer = setInterval(() => {
                if (this.s > 1) {
                    this.s -= 1;
                    this.j -= 1;
                    var minutes = parseInt(this.s / 60);
                    var seconds = Math.floor(this.s % 60);
                    this.timeheader =
                        "0" +
                        minutes +
                        ":" +
                        (seconds >= 10 ? seconds : "0" + seconds);
                } else {
                    this.j -= 1;
                    this.timeheader = "已封盘";
                    if (this.j < 0) {
                        this.getPeriods();
                        clearInterval(this.timer);
                        this.timer = null;
                        this.getHistory();
                    }
                }
            }, 1000);
        },
        Chdetails: function() {
            if (this.money == null || this.money == 0) {
                // this.qian = 0;
                Toast("请输入金额");
                return;
            }
            // console.log()
            if (this.arry.length > 0) {
                if (this.timeheader != "已封盘") {
                    var modal = document.querySelector(".v-modal");
                    var now1 = document.querySelector(".now1");
                    modal.style.display = "block";
                    now1.style.display = "block";
                    var tanchuang = document.querySelector(".tanchuang");
                    tanchuang.style.display = "block";
                } else {
                    Toast("请等待开盘");
                }
            } else {
                Toast("请输入球数量");
            }
        },
        xiangqi: function() {
            var Ch = document.querySelector(".Ch");
            if (Ch.style.display == "none") {
                Ch.style.display = "block";
            } else {
                Ch.style.display = "none";
            }
        },
        jiaqi: function() {
            this.duqi++;
        },
        jianqi: function() {
            this.duqi--;
        },
        xiangqi: function() {
            var Ch = document.querySelector(".Ch");
            if (Ch.style.display == "none") {
                Ch.style.display = "block";
            } else {
                Ch.style.display = "none";
            }
        },
        getPeriods: function() {
            //获取期数与赔率
            this.$http.jsonp("api/LuckyOrder/new_per").then(result => {
                // console.log(result)
                var d = new Date();
                var day = d.getDate();
                var month = d.getMonth() + 1;
                if (day < 10) {
                    day = "0" + day;
                }
                if (month < 10) {
                    month = "0" + month;
                }
                this.periods = result.body.data;
                this.periods.day = month + "-" + day;
                var per = this.periods.odds;
                this.nu.forEach(function(it, i) {
                    per.forEach(function(value, j) {
                        if (it["num"] == value["content"]) {
                            it["odds"] = value["odds"];
                        }
                    });
                });
                this.time();
            });
        },
        getHistory: function() {
            //获取历史开奖结果
            this.$http.jsonp("api/Luckyauto/history?page=1").then(result => {
                console.log(result);
                this.historyone = result.body.data[0];
                this.history = [
                    result.body.data[1],
                    result.body.data[2],
                    result.body.data[3]
                ];
                var arr = "";
                this.history.forEach(function(item, index) {
                    arr = item["ctime"].split(" ");
                    item["ctime"] = arr[1];
                });
            });
        },
        goBet: function() {
            //下注
            var money = this.money;
            var chase = this.duqi;
            var periods = this.periods.now;

            this.name.forEach(function(it, index) {
                it["money"] = money;
            });
            console.log(this.name);
            this.$http
                .post(
                    "api/Luckyorder/cathectic",
                    {
                        "data[data]": this.name,
                        "data[chase]": chase,
                        "data[periods]": periods,
                        "data[uid]": 1
                    },
                    { emulateJSON: true }
                )
                .then(
                    function(res) {
                        // console.log(res)
                        if (res.body.code == 1000) {
                            Toast("投注成功");
                        } else {
                            Toast(res.body.msg);
                        }
                    },
                    function() {
                        console.log("请求失败处理"); //失败处理
                    }
                );
        }
    },
    watch: {
        duqi: function(newvlue) {
            this.duqi = parseInt(newvlue);
            if (newvlue > 99) {
                this.duqi = 99;
            } else if (newvlue < 0) {
                this.duqi = 0;
            }
        },
        money: function(newvlue) {
            this.money = parseInt(newvlue);
            if (newvlue > 999) {
                this.money = 1000;
            } else if (newvlue < 10) {
                this.money = 10;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.ChCompetition {
    .pa024 {
        padding: 0 0.24rem;
    }
    span {
        display: inline-block;
    }
    .m_right5 {
        margin-right: 0.5rem;
    }

    padding-bottom: 0.6rem;
    .mui-bar {
        background: #d51313;
        padding-right: 0px;
        padding-left: 0px;
        a {
            color: #fff;
        }
        .mint-button::after {
            background: #d51313;
        }
        box-shadow: none;
    }
    .toww {
        background: #fff;
        height: 0.96rem;
        width: 100%;
        background: #fff;
        line-height: 0.96rem;
        .few {
            position: absolute;
            font-size: 0.28rem;

            left: 0.3rem;
            color: #000;
        }
        .By {
            position: absolute;
            font-size: 0.28rem;
            left: 1.5rem;
            input {
                width: 2rem;
                height: 0.8rem;
                font-size: 0.24rem;
            }
        }

        .qingkong {
            position: absolute;
            font-size: 0.28rem;
            left: 4.3rem;
            color: #d51313;
        }
        .Betting {
            position: absolute;
            height: 0.96rem;
            font-size: 0.32rem;
            color: #fff;
            background: #d51313;
            width: 30%;
            text-align: center;
            line-height: 0.96rem;
            right: 0rem;
        }
    }
    .mint-navbar {
        .mint-tab-item.is-selected {
            box-sizing: border-box;
            border-bottom: 0.04rem solid red;
        }
        .mint-tab-item {
            padding: 0.23rem 0;
            .c1 {
                font-size: 0.3rem;
            }
        }
    }
    .Chheader {
        background: url("../../img/Game/椭圆2.png") no-repeat;
        height: 2.08rem;
        background-size: 7.5rem 1.5rem;
        margin-bottom: 0.22rem;
        .Chhome {
            height: 100%;
            width: 90%;
            margin: 0 auto;
            background: #fff;
            padding-top: 0.22rem;
            position: relative;
            margin-top: 44px;
            .ChhomeOne {
                display: flex;
                justify-content: space-between;
                font-size: 0.24rem;
                img {
                    width: 0.86rem;
                    height: 0.86rem;
                    border-radius: 50%;
                }
                span {
                    color: #4f4f4f;
                }
            }
            .ChhomeTwo {
                font-size: 0.5rem;
                text-align: center;
                position: relative;
                top: -0.3rem;
            }
            .ChhomeThere {
                display: flex;
                justify-content: space-between;
                font-size: 0.24rem;
                color: #4f4f4f;
                margin-top: 0.1rem;
                padding-bottom: 0.1rem;
                span {
                    font-size: 0.26rem;
                }
                .number {
                    color: #d51313;
                    font-size: 0.18rem;
                    .round {
                        text-align: center;
                        font-size: 0.18rem;
                        width: 0.36rem;
                        height: 0.36rem;
                        border-radius: 50%;
                        border: 1px solid #d51313;
                        color: #d51313;

                        line-height: 0.36rem;
                    }
                    .background {
                        background: #d51313;
                        color: #fff;
                    }
                }
                .font {
                    color: #077dff;
                    span {
                        margin-right: 0.1rem;
                    }
                    img {
                        width: 0.223rem;
                        height: 0.12rem;
                    }
                }
            }
            .Chhome4 {
                background: #fff;
                border-top: 1px solid #e0e0ee;
                padding-top: 0.32rem;
                .font22 {
                    font-size: 0.22rem;
                    color: #141414;
                }
                .titlekaijiang {
                    font-size: 0.28rem;
                }
            }
        }
    }

    // ///////////

    //////////////////浮动按钮/////////////////
    .mint-msgbox-wrapper {
        .tanchuang {
            width: 5rem;
            background: #fff;
            border-radius: 5px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            padding: 0 0.3rem;
            height: 6.6rem;
            .tanchuang1 {
                padding: 0.3rem 0;
                font-size: 0.34rem;
                text-align: center;
                img {
                    float: right;
                    width: 0.49rem;
                    height: 0.49rem;
                    position: relative;
                    top: -0.1rem;
                }
            }
            .tanchuang2Header {
                padding: 0.3rem 0;
                display: flex;
                justify-content: space-between;
                font-size: 0.3rem;
                span {
                    width: 25%;
                    text-align: center;
                }
            }
            ul {
                margin-top: 0.1rem;
                padding: 0 0 0.3rem 0;
                box-sizing: border-box;
                overflow-y: auto;
                height: 2rem;
                li {
                    padding-bottom: 0.2rem;
                    display: flex;
                    justify-content: space-between;
                    span {
                        width: 25%;
                        text-align: center;
                    }
                    .li1 {
                        font-size: 0.28rem;
                    }
                    .li2 {
                        font-size: 0.24rem;
                    }
                }
            }
            .tanchuangFoot {
                padding: 0.2rem 0;
                border-top: 1px solid #e0e0e0;
                font-size: 0.3rem;
                display: flex;
                justify-content: space-between;
                .imgInput {
                    position: relative;

                    .jia {
                        position: absolute;
                        height: 0.36rem;
                        width: 0.36rem;
                        line-height: 0.6rem;
                        left: 0.5rem;
                        img {
                            height: 0.26rem;
                            width: 0.26rem;
                        }
                    }

                    .jian {
                        position: absolute;
                        height: 0.36rem;
                        width: 0.36rem;
                        left: 1.6rem;

                        img {
                            height: 0.04rem;
                            width: 0.26rem;
                        }
                    }
                    input {
                        width: 1.6rem;
                        height: 0.6rem;
                        padding: 0 0.4rem;
                        box-sizing: border-box;
                        text-align: center;
                    }
                }
            }
            .heji {
                float: right;
                span {
                    color: #d51313;
                    margin-top: 0.05rem;
                }
            }
            .queding {
                padding: 0.2rem;
                text-align: center;
                background: #d51313;
                border-radius: 5px;
                color: #fff;
                margin-bottom: 0.2rem;
            }
        }
        .mint-msgboxone {
            height: 3.1rem;
            width: 5.44rem;
            border-radius: 10px;
            line-height: 2.1rem;
            text-align: center;

            .box {
                .title {
                    font-family: PingFangSC-Regular;
                    font-size: 0.34rem;
                }
                .btn {
                    margin: 0 auto;
                    width: 80%;
                    .btn1 {
                        margin-right: 0.3rem;
                        background: #e0e0ee;
                    }
                }
            }
        }
    }
    /////////////////////////////////
    .mint-msgboxtwo {
        position: fixed;
        top: 96vh;
        left: 50%;
    }
    .mint-msgbox-wrapper {
        .mint-msgboxone {
            height: 3.76rem;
            width: 2.38rem;
            position: fixed;
            top: 2.5rem;
            left: 78%;
            .mintOne {
                .title {
                    display: flex;
                    justify-content: center;
                    border-bottom: 1px solid #e0e0e0;
                    line-height: 0.75rem;
                    height: 0.75rem;
                    span {
                        width: 1.68rem;
                        text-align: center;
                        font-size: 0.28rem;
                        position: relative;
                    }
                    img {
                        width: 0.58rem;
                        height: 0.58rem;
                        position: relative;
                        top: 0.11rem;
                        left: 0.1rem;
                    }
                }
            }
        }
    }
    .round1 {
        display: flex;
        overflow-y: auto;
        width: 100%;
        height: 6rem;
        justify-content: space-between;
        flex-wrap: wrap;
        div {
            margin: 0rem 0.2rem 0.66rem 0.2rem;
        }
        .round2 {
            text-align: center;
            font-size: 0.3rem;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            border: 1px solid #d51313;
            color: #d51313;

            line-height: 0.7rem;
        }
        .background {
            background: #d51313;
            color: #fff;
        }
    }
}
</style>   